<template>
<q-page ref="MusicPage" class="bg-grey-10" style="padding-top:50px">
    <q-list separator ref="qList" dark>

        <q-item v-for="item,index in musicList" :key="index" clickable  active-class="bg-teal-8 text-white">
            <q-card class="bg-transparent q-pa-none full-width" flat>

                <div class="row items-center justify-between  no-wrap ">
                    <div class="column ellipsis ">
                        <div class="row  items-end text-subtitle1 name " :class="{scroll: nameScroll && selectedItem==item.music_id}">
                            {{ item.name }}

                        </div>
                        <div class="text-caption row items-center" style="opacity:0.8">Id:{{ item.music_id }}</div>
                        <div class="text-caption row items-center q-py-sm">
                            <span class="q-mr-sm row items-center">
                                <q-icon v-if="item.duration" class="q-mr-sm" name="mdi-clock-time-nine-outline"></q-icon>
                                <q-badge v-if="item.duration" outline dense color="blue-6">{{item.format_duration}}</q-badge>
                                <div v-if="item.type[0]!=0" class="q-ml-sm">
                                    <span v-for="i in item.type" :key="i.mt_id">
                                        <q-badge class="q-mr-sm" outline dense color="light-green-6">{{i.name}}</q-badge>
                                    </span>
                                </div>

                            </span>
                        </div>
                    </div>

                    <div class="row items-center no-wrap q-pl-sm">

                        <q-spinner-audio class="q-ml-sm full-height" color="white" v-show="selectedItem==item.music_id && isPlay" />




                    </div>

                </div>

            </q-card>

        </q-item>

    </q-list>

    <!-- <music-list v-if="curTab =='library'" ref="MusicList" :musicList.sync="musicList" @update="handleItemClick"  :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list> -->

    <!-- <music-list v-if="curTab =='collection'" ref="MusicList" :isLoading="isMusicLoad" :musicList.sync="collectionList" :tab="curTab" @update="handleItemClick" :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list>

    <music-list v-if="curTab =='like'" ref="MusicList" :isLoading="isMusicLoad" :musicList.sync="likeList" :tab="curTab" @update="handleItemClick" :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list> -->

    <q-page-sticky expand position="top" class="items-start" style="height:50px">
        <div class="bg-dark full-width full-height row items-center ">
            <q-breadcrumbs v-if="curTab=='library'" class="q-px-sm text-primary">
                <q-breadcrumbs-el label="全部" icon="widgets" />
                <q-breadcrumbs-el v-if="curMusicTypeName" :label="curMusicTypeName" />
            </q-breadcrumbs>
            <div v-if="curTab=='collection'" class="full-width row items-center justify-between">
                <q-breadcrumbs class="q-px-sm text-primary">
                    <div>
                        <q-breadcrumbs-el label="全部" icon="widgets" />
                        <q-breadcrumbs-el :label="curMusicTypeName" />
                    </div>

                </q-breadcrumbs>
                <!-- <q-btn outline dense class="q-px-md q-mr-sm">一键加载</q-btn> -->
            </div>

            <q-breadcrumbs v-if="curTab=='like'" class="q-px-sm text-primary">

                <q-breadcrumbs-el v-for="item in curLikePath" :key="item.mlf_id" :label="item.name" @click="handleLikeSelect(item.mlf_id)" class="cursor-pointer" />

            </q-breadcrumbs>

            <div class="col-grow row justify-end" v-if="curTab=='library'">
                <q-btn class="q-mr-sm" v-if="!isSearch" flat dense :icon="sortIcon">
                    <q-menu dark>
                        <q-list dense style="min-width: 100px" class="shadow-7">
                            <q-item @click="handleLoadMusicEasy('name','mdi-sort-alphabetical-ascending')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-sort-alphabetical-ascending" />
                                        <span>按名称排序</span>
                                    </div>

                                </q-item-section>
                            </q-item>
                            <q-item @click="handleLoadMusicEasy('rate','mdi-star-outline')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-star-outline" />
                                        <span>按评分排序</span>
                                    </div>
                                </q-item-section>
                            </q-item>
                            <q-item @click="handleLoadMusicEasy('ctime','mdi-sort-clock-descending-outline')" clickable v-close-popup>

                                <q-item-section>
                                    <div class="row no-wrap items-center">
                                        <q-icon class="q-mr-sm" name="mdi-sort-clock-descending-outline" />
                                        <span>按创建时间排序</span>
                                    </div>
                                </q-item-section>
                            </q-item>
                            <q-separator />
                        </q-list>

                    </q-menu>
                </q-btn>
                <q-btn class="q-mr-sm" v-if="!isSearch" flat dense icon="search" @click="isSearch=true" />
                <q-input v-if="isSearch" autofocus dark filled dense :debounce="200" @input="handleSearchInput" v-model="searchName" class="full-width" label="搜索">

                    <template v-slot:append>
                        <q-icon name="close" @click="handleSearchClose" class="cursor-pointer" />

                    </template>

                </q-input>
            </div>

        </div>

    </q-page-sticky>
    <q-inner-loading :showing="isLoading" class="bg-grey-9">
        <q-spinner-gears size="50px" color="primary" />
        数据加载中
    </q-inner-loading>
</q-page>
</template>

<script>
import {
    loadMusicList,
    updateMusicDuration,
    loadMusicListByType,
    loadCollectionList,
    searchMusicLibrary,
    loadLikeList

} from "assets/api/studio/music"
import {
    getSeconds
} from "assets/utils/stodate";
export default {
    name: 'MusicPage',
    components: {
        MusicList: () => import('components/studio/MusicList.vue')
    },
    props: {
        user: {
            type: Object
        },
        isPlay: {
            default: false
        },
        curTab: {
            type: String,
            default: 'library'
        },
        typeOptions: {
            type: Array
        }
    },
    data() {
        return {
            tab: 'library',
            isSearch: false,
            projectInfo: {},
            pid: '',
            musicList: [],
            pageNum: 1,
            pageSize: 50,
            scrollStyle: {
                height: 0
            },
            curMusicType: '',
            curMusicTypeName: '',
            isLoadType: false,
            searchName: '',
            collectionList: [],
            count: 0,
            sortType: 'name',
            sortIcon: 'mdi-sort-alphabetical-ascending',
            isLoading: true,

            likeList: [],
            curLikePath: [{
                mlf_id: 0,
                name: '全部',
            }]

        };
    },
    created() {
        this.pid = this.$route.params.pid;
        let projectInfo = this.$storage.getItem(this.pid);

        this.projectInfo = projectInfo;

    },
    mounted() {
        this.handleLoadMusicList()

    },
    methods: {
        handleSearchClose() {
            if (this.searchName) {
                this.handlePageNumReset()
                this.handleLoadMusicEasy()
            }
            this.searchName = '';
            this.isSearch = false;

        },
        handleLoadMusicEasy(val, icon) {
            // if (val) {
            //     this.sortType = val;
            //     this.sortIcon = icon;
            //     this.handlePageNumReset();
            // }

            // if (this.curMusicType) {
            //     this.handleLoadMusicByType()
            // } else {
            //     this.handleLoadMusicList()
            // }
        },
        handleSearchMusicList() {

            if (this.curMusicType) {

                var type = this.curMusicType
            } else {
                var type = '0'
            }
            searchMusicLibrary({
                type,
                sortType: this.sortType,
                name: this.searchName,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                console.log(res.data);
                //this.isMusicLoad=false;
                if (res.data.code == 1) {
                    let data = res.data.data;
                    let format_data = this.formatMusicList(data)

                    this.$emit('update', format_data)
                    this.musicList = format_data;
                }
            })
        },

        //like
        handleLoadLikeList(mlf_id) {
            loadLikeList({
                mlf_id: mlf_id
            }).then(res => {
                if (res.data.code == 1) {
                    console.log(res.data.data);
                    let data = res.data.data;
                    console.log(data);
                    let format_data = this.formatMusicList(data)

                    this.$emit('update', format_data)
                    this.likeList = format_data;
                    //this.scrollStyle.width = this.$refs.MusicPage.$el.offsetWidth + 'px';
                }
            })
        },
        handleLikeSelect(mlf_id) {
            this.$emit('likeSelect', mlf_id)
        },

        //collection
        handleLoadCollectionList() {
            loadCollectionList({
                pid: this.pid
            }).then(res => {
                if (res.data.code == 1) {
                    console.log(res.data.data);
                    this.isMusicLoad = false
                    let data = res.data.data;
                    let format_data = this.formatMusicList(data)

                    this.$emit('update', format_data)
                    this.collectionList = format_data;
                    console.log(this.collectionList);
                    //this.scrollStyle.width = this.$refs.MusicPage.$el.offsetWidth + 'px';
                }
            })
        },
        handleSearchInput(v) {
            console.log(v);
            this.handlePageNumReset()
            this.handleSearchMusicList()
        },
        handlePageNumReset() {
            this.pageNum = 1;
            this.$refs.MusicList.pageNum = 1;
        },
        handleLoadMusicByType(type) {
            this.isLoadType = true
            loadMusicListByType({
                type: this.curMusicType,
                sortType: this.sortType,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {

                if (res.data.code == 1) {
                    //this.isMusicLoad=false;
                    let data = res.data.data;
                    let format_data = this.formatMusicList(data)

                    this.$emit('update', format_data)
                    this.musicList = format_data;
                }

            })
        },

        handlePageWidth() {
            if (this.$q.platform.is.desktop) {
                if (this.$refs.MusicPage) {

                    this.$set(this.scrollStyle, 'width', this.$refs.MusicPage.$el.offsetWidth + 'px')
                    if (this.musicList.length > 0 && this.$refs.MusicList) {
                        console.log(this.$refs.LibraryList);
                        this.$refs.MusicList.handleListWidth(this.$refs.MusicPage.$el.offsetWidth + 'px')

                    }

                }
            }

        },
        handlePageHeight(val, i) {

            // this.scrollStyle.height = i - val - 50 + 'px';

            this.handlePageWidth();
            return {
                height: i - val + 'px'
            }

        },

        handleUpdateDuration(duration, music_id) {
            updateMusicDuration({
                duration,
                music_id
            }).then(res => {
                if (res.data.code == 1) {
                    let index = this.musicList.findIndex(i => i.music_id == music_id)
                    console.log(index, 'index');
                    this.musicList[index].duration = duration
                    this.musicList[index].format_duration = getSeconds(duration)
                }
            })
        },
        handleTabChange(item) {
            console.log(item);
            this.$emit('update:curTab', item)

        },

        handleReload(num) {
            console.log(num, '页面跳转');
            this.pageNum = num;
            this.isMusicLoad = true;

            if (this.searchName) {
                this.handleSearchMusicList()
            } else {
                if (this.curTab == "library") {
                    if (this.isLoadType) {
                        this.handleLoadMusicByType(this.curMusicType)
                    } else {
                        this.handleLoadMusicList()
                    }
                }
                if (this.curTab == 'collection') {
                    this.handleLoadCollectionList()
                }
            }

        },
        formatMusicList(data) {
            if (data.length > 0) {
                this.count = data[0].count;
                this.$emit('update:dataCount', this.count)
                console.log(data, 'formatList');
                let newdata = []

                this.$refs.MusicList.total = Math.ceil(data[0].count / this.pageSize);
                data.forEach(i => {
                    i.poster = this.GLOBAL.serveurl + '/data/img/cover.jpeg'
                    i.vid = i.music_id;
                    if (i.mc_id) {
                        i.isCollect = true
                    } else {
                        i.isCollect = false
                    }

                    i.type = JSON.parse(i.type)
                    i.format_duration = ""
                    if (i.duration) {
                        i.format_duration = getSeconds(i.duration)
                    }

                    if (i.isDirectory == 0) {
                        i.src = this.GLOBAL.serveurl + '/musicdata/' + i.path + '/main.mp3'
                    } else {
                        i.src = this.GLOBAL.serveurl + '/musicdata/' + i.path
                    }
                    newdata.push(i)

                })
                console.log(newdata);
                return newdata
            } else {
                return data
            }

        },

        handleLoadMusicList() {
            this.isLoadType = false;
            loadMusicList({
                pid: this.pid,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                sortType: this.sortType,
            }).then(res => {
                this.isLoading = false;
                //this.isMusicLoad=false;
                if (res.data.code == 1) {
                    let data = res.data.data;


                    let format_data = this.formatMusicList(data)

                    this.$emit('update', format_data)
                    this.musicList = format_data;

                }
            })
        },
        handleImg() {
            this.isImgDialog = false;
        },
        changeSelectedItem(music_id) {
            this.$refs.MusicList.selectedItem = music_id
        },

        handleItemClick(item, index, music_id) {
            console.log(item, index, music_id);
            // this.selectedItem = item.music_id;
            this.$emit('player', 'setIndex', index, music_id, item)

        },

    }

};
</script>
